<template>
  <el-menu
    :collapse="count.isCollapse"
    active-text-color="#ffd04b"
    background-color="#304156"
    class="el-menu-vertical-demo"
    text-color="#fff"
    :router="true"
    :unique-opened="true"
    :default-opened="defauleActive"
    :default-active="defauleActive"
  >
    <el-menu-item index="/index">
      <el-icon><Setting /></el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-sub-menu v-for="item in storeMenu" :key="item.id" :index="item.name">
      <!-- 一级菜单 -->
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>{{item.title}}</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item-group v-show="el.hidden==1? false:true" v-for="el in item.children" :key="el.id" :index="el.title">
        <el-menu-item :index="'/'+item.name+'/'+el.name" >{{
          el.title
        }}</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { useCounterStore } from "@/stores/counter";
import { useMenusStroe } from "@/stores/menus";
import { Setting } from "@element-plus/icons-vue";
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
let count = useCounterStore();
//获取pinia的菜单栏数据
// 做一个判断 ，创建完对象之后 更新数据
// 根据用户登录的权限列表 （登录之后拿到的data当中的menu） ，来更新
let menusStore = useMenusStroe();
let storeMenu = computed(() => {
  return menusStore.sortedMenus;
});
// 默认菜单高亮
let defauleActive = ref('/index')
//我们应该从 路由跳转,判断当前是在哪一个页面,从而知道菜单栏的子菜单应该是谁高亮
watch(useRoute(),//类似于vue2的this.$route
  (newVal) =>{
    // console.log(newVal);
    defauleActive.value=newVal.path
  },
  {
    immediate:true
  }
  )
  

</script>

<style lang="scss" scoped>
.el-menu {
  border: none;
  height: calc(100vh - 70px);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  min-height: 430px;
}
</style>
